import { Await, createBrowserRouter, Outlet, useAsyncError, useAsyncValue } from "react-router-dom";
import "@/index.css";
import ErrorPage from "@/error-page.tsx";
import { Suspense } from "react";
const router = createBrowserRouter([
  {
    path: "/",
    // element: <Root />,
    errorElement: <ErrorPage />,
    // loader: rootLoader,
    // action: rootAction,
    async lazy() {
      const { default: Root, loader, action } = await import("@/components/root.tsx");
      return {
        Component: Root,
        loader,
        action,
      };
    },
    children: [
      {
        errorElement: <ErrorPage />,
        // element: (
        //   <div>
        //     <h1>xxx</h1>
        //     <hr />
        //     <Outlet />
        //   </div>
        // ),
        children: [
          {
            index: true,
            // element: <Index />,
            async lazy() {
              const { default: Index } = await import("@/components/index.tsx");
              return {
                Component: Index,
              };
            },
          },
          {
            path: "contacts/:id",
            // element: <Contact />,
            // loader: contactLoader,
            // action: ContactAction,
            async lazy() {
              const { default: Contact, loader, action } = await import("@/components/contact.tsx");
              return {
                Component: Contact,
                loader,
                action,
              };
            },
          },
          {
            path: "contacts/:id/edit",
            // element: <ContactEdit />,
            // loader: contactLoader,
            // action: contactEditAction,
            async lazy() {
              const { default: ContactEdit, action } = await import("@/components/edit.tsx");
              const { loader } = await import("@/components/contact.tsx");
              return {
                Component: ContactEdit,
                loader,
                action,
              };
            },
          },
          {
            path: "/contacts/:id/destroy",
            // action: deleteAction,
            async lazy() {
              const { action } = await import("@/components/delete.tsx");
              return {
                action,
              };
            },
          },
        ],
      },
    ],
  },
]);

export default router;

